<template>

	<view class="message paddTopheder">
		<Header title="消息中心" fontSize="36rpx" color="#000000" :name="false" rightColor="#000" :fanhui="false"
			rightIcon="全部已读" @rightClick="rightClick" />
		<!-- <view class="Prompt">
			<image src="@/static/carType/sigh.png" mode="widthFix"></image>
			<view class="text">
				系统通知未开启，可能会错过消息哦
			</view>
			<view class="PromptBtn">去开启</view>
		</view> -->
		<!-- <view class="cell">
			<u-cell-group>
				<u-cell :icon="require('@/static/tabBar/bell.png')" title="服务提醒"
					:titleStyle="{color:'#000000',fontSize:'30rpx',marginTop:'20rpx',fontWeight:'bold',fontFamily: 'PingFang-SC-Bold'}"
					:iconStyle="{marginTop:'19rpx',width:'92rpx',height:'92rpx',marginRight:'30rpx',}"
					:rightIconStyle="{marginTop:'20rpx'}" class="cell_item" :border='false' label='订单退款成功'
					:labelStyle="{color:'#949494',fontSize:'24rpx'}">
				</u-cell>
				<view class="divider"></view>
				<u-cell :icon="require('@/static/tabBar/gift.png')" title="优惠活动"
					:titleStyle="{color:'#000000',fontSize:'30rpx',marginTop:'20rpx',fontWeight:'bold',fontFamily: 'PingFang-SC-Bold'}"
					:iconStyle="{marginTop:'19rpx',width:'92rpx',height:'92rpx',marginRight:'30rpx'}"
					:rightIconStyle="{marginTop:'20rpx'}" class="cell_item" :border='false' label='暂无消息'
					:labelStyle="{color:'#949494',fontSize:'24rpx'}">
				</u-cell>
				<view class="divider"></view>
				<u-cell :icon="require('@/static/tabBar/service.png')" title="在线客服"
					:titleStyle="{color:'#000000',fontSize:'30rpx',marginTop:'20rpx',fontWeight:'bold',fontFamily: 'PingFang-SC-Bold'}"
					:iconStyle="{marginTop:'19rpx',width:'92rpx',height:'92rpx',marginRight:'30rpx'}"
					:rightIconStyle="{marginTop:'20rpx'}" class="cell_item" :border='false' label='暂无消息'
					:labelStyle="{color:'#949494',fontSize:'24rpx'}">
				</u-cell>

			</u-cell-group>
		</view> -->
		<view class="chat_list">
			<view class="chat_item" v-for="item in messageResult" @click="wayClick(item)">
				<image src="@/static/carType/headSculpture.png" mode="widthFix"></image>
				<view class="chatInfo">
					<view class="chatName">
						<view class="name">
							{{item.nick_name}}
						</view>
						<view class="time">
							{{handleTime(item.createTime,item.read)}}
						</view>
					</view>
					<view class="chatText">
						<view class="Highlight">
							{{item.read==0?'【新消息】':''}}
						</view>
						<view class="text">
							{{item.headline}}
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import Header from '@/components/header/header.vue'
	import order from '@/api/modules/order.js'
	export default {
		data() {
			return {
				options: [{}, {}],
				messageResult:[],
			}
		},
		methods: {
			rightClick() {
				order.modifyMessageReadAll({}).then((res)=>{
					uni.reLaunch({
					    url: '/pages/message/message'
					})
				})
			},
			handleTime(t,read){
				if(t!=null){
					var y = t.split(" ")[0];
					var date = new Date();
					var cdate = new Date(y);
					var h = t.split(" ")[1];
					var str = h.split(":")[0] + ":" + h.split(":")[1];
					switch(date.getDate()-cdate.getDate()){
						case 0:
							str = "今天" + str;
						break;
						case 1:
							str = "昨天" + str;
						break;
						case 2:
							str = "前天 " + str;
						break;
						default:
							str = y + " " + str;
						break;
					}
					return str;
				}else{
					return "";
				}
			},
			wayClick(e){
				order.modifyMessageRead({messageId:e.message_id}).then((res)=>{})
			}
		},
		created() {

		},
		onShow() {
			// uni.setTabBarBadge({ //显示红点 
			// 	index: 2,
			// 	text: '99'
			// })
			order.queryDCargoOwenerMessageAll().then((res)=>{
				this.messageResult=[];
				if(res.data.code==200){
					this.messageResult = res.data.data;
				}
			})
		},
		components: {
			Header
		}
	}
</script>

<style lang="scss" scoped>
	.message {
		height: calc(100vh - var(--window-bottom));
		display: flex;
		flex-direction: column;
		background-color: #F6F6F6;

		.Prompt {
			display: flex;
			height: 68rpx;
			width: 750rpx;
			align-items: center;
			background-color: #E5F5FD;
			padding: 0 40rpx 0 30rpx;
			box-sizing: border-box;


			>image {
				width: 24rpx;
				height: 24rpx;
				margin-right: 20rpx;
			}

			>.text {
				color: #00A0E9;
				font-size: 24rpx;
			}

			>.PromptBtn {
				margin-left: auto;

				border-radius: 10rpx;
				border: 1rpx solid #00A0E9;
				color: #00A0E9;
				font-size: 24rpx;
				height: 48rpx;

				padding: 8rpx 20rpx 7rpx 20rpx;
				box-sizing: border-box;


			}
		}

		.cell {
			width: 750rpx;

			background-color: #fff;
			margin: 20rpx 0;

			/deep/ .u-cell__body {
				padding: 19rpx 39rpx 19rpx 30rpx;
			}

			.divider {
				width: 620rpx;
				height: 1rpx;
				background-color: #EEEEEE;
				margin-left: auto;
			}

			.cell_item {
				font-family: PingFang-SC-Bold;

			}
		}

		.chat_list {

			margin-top: 20rpx;
			width: 750rpx;
			border-radius: 10rpx;

			.chat_item {
				display: flex;
				width: 750rpx;
				height: 130rpx;
				border-bottom: 2rpx solid #F6F6F6;
				box-sizing: border-box;
				background-color: #fff;


				>image {
					height: 92rpx;
					width: 92rpx;
					border-radius: 50%;
					margin: 19rpx 20rpx 19rpx 30rpx;

				}

				.chatInfo {
					margin-top: 23rpx;
					margin-bottom: 22rpx;


					>.chatName {
						display: flex;
						width: 528rpx;
						align-items: center;
						margin-bottom: 10rpx;
						justify-content: space-between;
						height: 42rpx;



						>.name {
							color: #000;
							font-size: 30rpx;
							font-weight: bold;
						}

						>.time {
							color: #949494;
							font-size: 24rpx;
						}
					}

					.chatText {
						display: flex;



						>.Highlight {
							color: #00A0E9;
							font-size: 24rpx;
						}

						>.text {
							width: 350rpx;
							font-size: 24rpx;
							color: #949494;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
						}
					}
				}


			}
		}

	}
</style>